<template>
  <div class="modal-container">
    <el-dialog
      title="设置权限"
      width="1100px"
      custom-class="modal-record"
      :close-on-click-modal="false"
      :visible.sync="show"
      :before-close="onModalClose"
    >
      <div class="modal-inner">
        <div class="modal-ctx">
          <!-- 其他权限 -->
          <div
            class="input-box flex"
            v-for="(group, group_index) in roleGroup"
            :key="group_index"
          >
            <div class="label">
              <div class="title">{{ group.title }}</div>
              <div
                class="check-box"
                style="margin-top: 10px"
                @click="toggle_check(group, group_index)"
              >
                <el-checkbox
                  disabled
                  v-model="group.checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
              </div>
            </div>
            <div class="input-item" v-if="group.child && group.child.length">
              <!--  已选项 -->
              <el-checkbox-group
                v-model="checkList_group[group_index]"
                @change="onChangeCheckList"
              >
                <!-- 循环分组 -->
                <el-checkbox
                  v-for="(item, index) in group.child"
                  :key="index"
                  :label="item.title"
                >
                  {{ item.title }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="form_submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "modal-hetong",
  components: {},
  
  data() {
    return {
      show: false,
      userIds: "",

      roleGroup: [
        {
          title: "菜单",
          checkAll: true,
          child: [
            { title: "子菜单1", val: "" },
            { title: "子菜单2", val: "" },
            { title: "子菜单3", val: "" },
          ],
        },
      ],

      checkList_group: [[]], //所有已选项目
    };
  },
  computed: {},
  watch: {
    show(val) {
      if (!val) {
        this.userIds = "";
        this.checkList_group = [];
      }
    },
    //所有其他权限
    checkList_group: {
      deep: true,
      handler: function (val) {
        console.log("所有选择的项目", val);
      },
    },
  },

  created() {
    // this.setView();
  },
  methods: {
    init(option) {
      let {
        //
        pageActionType,
        modalTitle,
        data,
      } = option;
      this.show = true;
    },

    set_checked_state() {
      //循环组数据
      this.roleGroup.forEach((group, group_index) => {
        // debugger
        if (group.child.length == this.checkList_group[group_index].length) {
          group.checkAll = true;
        } else {
          group.checkAll = false;
        }
      });
    },

    //切换选择
    toggle_check(group, group_index) {
      console.log("切换全选", { ...group });
      group.checkAll = !group.checkAll;

      //勾选了全部
      if (group.checkAll) {
        // debugger;
        let new_val = [...this.roleGroup[group_index].child];
        let new_roles = new_val.map((v) => v.title);
        this.checkList_group[group_index] = new_roles;
      } else {
        this.checkList_group[group_index] = [];
      }
    },

    //

    onChangeCheckList() {
      console.log("监视勾选");

      this.set_checked_state();
    },

    handleCheckAllChange(val) {
      console.log("handleCheckAllChange", val);
    },

    setView() {
      this.$api("getRoles").then((res) => {
        console.log("权限管理", res);
      });
    },

    onModalClose() {
      this.show = false;
    },
    form_submit() {
      let roles = "";
      if (this.checkList_group && this.checkList_group.length) {
        roles = JSON.stringify(this.checkList_group);
      }
      // day_roles = {
      //   部门1: ["填报", "查看", "修改", "删除"],
      //   部门2: ["填报", "查看", "修改", "删除"],
      //   部门3: ["填报", "查看", "修改", "删除"],
      // };

      this.$api(
        "addRoles",
        {
          userIds: this.userIds,
          roles: roles,
        },
        "post"
      ).then((res) => {
        let userId_arr = this.userIds.split(",");
        //修改了当前用户权限
        if (userId_arr.find((v) => v == this.baseInfo.id)) {
          this.$store.dispatch("getUserInfo");
        }
        this.$parent.parentHandleModalAction({ type: "权限修改" });
        this.show = false;
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
/deep/ .is-checked .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #409eff;
  cursor: pointer;
}
/deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
  cursor: pointer;
}
/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner::after {
  cursor: pointer;
  color: #fff;
  border-color: #fff;
}

/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner {
  cursor: pointer;
}
/deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
  cursor: pointer;
}

/deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #606266;
}
/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: #fff;
  border-color: #dcdfe6;
}

/deep/ .el-checkbox {
  width: 17%;
  width: 20%;
  margin-top: 10px;
  margin-right: 0;

  &:nth-child(-n + 5) {
    margin-top: 0;
  }
}

/deep/ .modal-record {
  margin-top: 40px !important;

  .modal-inner {
    padding: 0;
    padding-top: 0;
  }

  .el-dialog__header {
    .flex-between();
    border-bottom: 1px solid #eee;

    .el-dialog__title {
      color: #000;
    }
    .el-dialog__headerbtn {
      // top: 0;
      .el-dialog__close {
        color: #000;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__footer {
    text-align: center;
  }
}

.modal-ctx {
  padding: 0 30px;
  padding-bottom: 20px;
  max-height: 70vh;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  // border-bottom: 1px solid #ddd;

  .input-box {
    padding: 20px 0;
    // margin-bottom: 15px;
    border-bottom: 1px dashed @theme;
    border-bottom: 1px dashed #ccc;

    &.flex {
      display: flex;
      align-items: center;

      .label {
        margin-bottom: 0;
      }
    }

    .label {
      min-width: 100px;
      margin-right: 5px;
      margin-bottom: 15px;
      font-size: 18px;
      color: #333;
      font-weight: bold;
      // color: #6e7285;
    }

    .input-item {
      flex: 2;

      .el-cascader {
        width: 100%;
      }
    }
  }
}

// 部门选择样式
.bumen-list {
  .bumen-item {
    .flex();
    padding: 10px 0;
    border-bottom: 1px dashed @theme;
    border-bottom: 1px dashed #ccc;
    // margin-bottom: 5px;
    &:last-child {
      border-bottom: none;
    }
    .bumen-title {
      min-width: 20%;
    }
    .bumen-actions {
      flex: 2;

      /deep/ .el-checkbox {
        width: 25%;
      }
    }
  }
}
</style>
